<!-- 打印组管理 -->
<template>
  <div>
    <div class="content-box">
      <div class="left-box">
        <div class="title-box">打印组管理</div>
        <div class="search-wrap">
          <div class="search-left-box"></div>
          <div class="search-right-box">
            <div class="search-input-box">
              <img class="search-icon" src="@/assets/images/home/search-icon.png" alt="" />
              <input class="input" v-model="searchParam.search" type="text" placeholder="搜索打印组名称" />
            </div>
            <div class="search-btn">查询</div>
          </div>
        </div>
        <div class="table-list-box">
          <el-table :data="tableData">
            <el-table-column align="center" prop="name" label="ID" />
            <el-table-column align="center" prop="name" label="计算机名称" />
            <el-table-column align="center" prop="name" label="所属计算机" />
            <el-table-column align="center" prop="name" label="创建时间" />
          </el-table>
        </div>
        <div class="desc-btn-box">
          <div class="desc">共100条</div>
          <div class="btn-box">
            <div class="add-printer" @click="handleAction(1)">新增打印组</div>
            <div class="update-status" @click="handleAction(2)">修改</div>
            <div class="update-status" @click="handleAction(3)">删除</div>
            <div class="update-status" @click="handleAction(4)">返回</div>
          </div>
        </div>
      </div>
    </div>
    <Add v-model:addPrinterGroupVisible="isShowAddPrinterGroup" />
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import Add from './components/Add.vue'

const router = useRouter()
const tableData = ref([
  { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
  { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }
])
const searchParam = reactive({})
const isShowAddPrinterGroup = ref(false)

function handleAction(index) {
  switch (index) {
    case 1: isShowAddPrinterGroup.value = true; break
    case 2: router.push({ name: 'PrintSetting' }); break
    case 3: break
    case 4: router.back(); break
  }
}
</script>

<style lang="scss" src="./modules/PrinteGroup.scss" scoped></style>
